<template>
  <div class="app-container paiban" ref="box">


    <div class="custom_card">
      <div style="display: flex;justify-content: space-between;">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="0px">
          <el-form-item label="">
            <el-select style="width:150px" filterable remote v-model="queryParams.currUserStore" placeholder="请选择门店">
              <el-option v-for="store in storeList" :key="store.id" :value="store.id" :label="store.name">
                {{ store.name }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="operatingClassification">
            <el-select style="width:150px" filterable remote v-model="queryParams.operatingClassification" clearable
                       placeholder="请选择车辆级别">
              <el-option v-for="item in rankList" :key="item.rankId" :value="item.rankId" :label="item.rankName">
                {{ item.rankName }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="shiftSchedulingStatus">
            <el-select style="width:150px" filterable remote v-model="queryParams.shiftSchedulingStatus" clearable
                       placeholder="请选择排班状态">
              <el-option :value="2" :label="'未确认排车'">未确认排车
              </el-option>

              <el-option :value="1" :label="'已确认排车'">已确认排车
              </el-option>

            </el-select>
          </el-form-item>

          <el-form-item label="" prop="orderSource">
            <el-select style="width:150px" filterable remote v-model="queryParams.orderSource" clearable
                       placeholder="请选择订单来源">
              <el-option v-for="item in originList" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel">
                {{ item.dictLabel }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="keywords">
            <el-input maxlength="30" clearable v-model="queryParams.keywords" placeholder="请输入车牌信息/车型信息"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <!--            <el-button icon="el-icon-full-screen" size="mini" @click="isScreenFull">全屏</el-button>-->
          </el-form-item>
        </el-form>

        <div class="el-radio-box">
          <el-radio-group v-model="queryParams.type" @change="handleQuery">
            <el-radio-button label="0">
              <div>全部</div>
            </el-radio-button>
            <el-radio-button label="1">
              <div style="display: flex;">
                <div class="line" style="background:#FF9F24"></div>
                待取车
              </div>
            </el-radio-button>
            <el-radio-button label="2">
              <div style="display: flex">
                <div class="line" style="background:#23BCCA"></div>
                用车中
              </div>
            </el-radio-button>
            <el-radio-button label="5">
              <div style="display: flex">
                <div class="line" style="background:#369AFE"></div>
                已还车
              </div>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="noplan">
        未确认排车订单数：{{ unSchedule }}&nbsp;&nbsp;库存紧张车型数：{{ tightCount }}&nbsp;&nbsp;<span style="color: #F5242F">冲突订单数：{{ conflictOrders }}</span>
      </div>

      <div class="barchart">
        <div class="left">
          <el-table :data="tableData" :span-method="objectSpanMethod" border :max-height="leftMaxHeight">
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  <el-row>
                    <span @click="selectTime">{{ queryParams.startTime }} 起</span>
                    <el-date-picker class="mSelectTime" v-model="queryParams.startTime" style="width:20px"
                                    :clearable="false" prefix-icon="el-icon-arrow-down" @change="changTime(0)" type="date"
                                    align="center" size="mini" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-row>
                  <el-row>
                    <el-col :span="8" style="text-align: right;">
                      <el-button type="text" style="padding: 0;color: #00bfbf" @click="changTime(1)">上两周</el-button>
                    </el-col>
                    <el-col :span="8" style="text-align: center;color: #FF9F24">
                      <el-button type="text" style="padding: 0;color: #FF9F24" @click="changTime(2)">今天起</el-button>
                    </el-col>
                    <el-col :span="8" style="text-align: left;color: #369AFE">
                      <el-button type="text" style="padding: 0;color: #00bfbf" @click="changTime(3)">下两周</el-button>
                    </el-col>
                  </el-row>
                </div>
              </template>
              <el-table-column align="center" prop="modelInfo" label="车型" min-width="120" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="model-title">
                    {{ scope.row.modelInfo }}
                  </div>
                  <div style="font-size: 12px;" @click="goStorage(scope.row)">
                    {{ scope.row.message }}<i class="el-icon-search" style="color: #5473E8"></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="carNo" label="车牌号" width="120">
                <template slot-scope="scope">
                  <div style="margin: 10px 0 2px;box-sizing: border-box;"
                       v-if="scope.row.carNo && scope.row.carNo.length > 1" @click="carPlatclick(scope.row)">
                    <el-badge v-if="scope.row.carSource == 2" value="调入" class="item">
                      <span :class="scope.row.carNo.length > 7 ? 'car_no_new' : 'car_no'">
                        {{ scope.row.carNo.substr(0, 2) }}<b class="dian">·</b>{{ scope.row.carNo.substr(2) }}
                      </span>
                    </el-badge>
                    <el-badge v-else-if="scope.row.carSource == 3" value="借入" class="item">
                      <span :class="scope.row.carNo.length > 7 ? 'car_no_new' : 'car_no'">
                        {{ scope.row.carNo.substr(0, 2) }}<b class="dian">·</b>{{ scope.row.carNo.substr(2) }}
                      </span>
                    </el-badge>
                    <el-badge v-else-if="scope.row.carSource == 4" value="OTA" class="item">
                      <span :class="scope.row.carNo.length > 7 ? 'car_no_new' : 'car_no'">
                        {{ scope.row.carNo.substr(0, 2) }}<b class="dian">·</b>{{ scope.row.carNo.substr(2) }}
                      </span>
                    </el-badge>
                    <el-badge v-else class="item">
                      <span :class="scope.row.carNo.length > 7 ? 'car_no_new' : 'car_no'">
                        {{ scope.row.carNo.substr(0, 2) }}<b class="dian">·</b>{{ scope.row.carNo.substr(2) }}
                      </span>
                    </el-badge>
                  </div>
                  <div v-else>暂无车辆</div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div class="right">
          <el-table :data="tableData" v-loading="loading" :max-height="rightMaxHeight">
            <el-table-column v-for="(it, index1) in showMonths" :label="it.str" prop="str" style="padding: 0; margin: 0;"
                             align="center" :key="index1">
              <el-table-column v-for="(itm, index2) in it.daysArr" :label="itm.day" prop="day" min-width="70"
                               style="padding: 0; margin: 0;" align="left" :key="index2"
                               :label-class-name="isRestDay(itm) ? 'label-class' : ''">
                <template slot="header" slot-scope="scope">
                  <el-row>{{ itm.day }}</el-row>
                  <el-row>{{ itm.week }}</el-row>
                  <el-row v-if="itm.holidayRes.isHoliday">{{
                      itm.holidayRes.isHoliday ? itm.holidayRes.name : ''
                    }}
                  </el-row>
                </template>
                <template slot-scope="scope" class="progressCon">

                  <template v-for="(item, index3) in scope.row[itm.timestamp]">
                    <template v-if="item.length > 0">

                      <template v-if="item.length && item.length === 1">
                        <el-button @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                                   @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                                   :ref="`${scope.$index}_${itm.timestamp}`"
                                   v-if="item.type === 1 || item.type === 2 || item.type === 5"
                                   :class="item.conflictOrNot === 1 ? 'conflict-or-not' : className[item.type]"
                                   style="width:calc(100% + 2px)" @click="showOrderOverviewDialog(item, true, scope.row.carNo)">
                          <template v-if="itm.timestamp == item.endTimeStamp">
                            <div class="paiban-item-wrap">
                              <i v-if="item.type === 1 && item.isItAWarning === 1"
                                 class="el-icon-warning paiban-warn"></i>
                              <span class="order_source">{{ item.orderSourceName.substring(0, 1) }}</span>
                              <span class="order_source" v-if="item.type === 1">{{
                                  item.isPlatoon == 1 ? "已" : "未"
                                }}</span>
                            </div>
                          </template>
                        </el-button>
                        <el-button v-else-if="item.type === 3"
                                   @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                                   @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                                   :ref="`${scope.$index}_${itm.timestamp}`" class="callOut"
                                   style="width:calc(100% + 2px)">借出
                        </el-button>
                        <el-button v-else-if="item.type === 4"
                                   @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                                   @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                                   :ref="`${scope.$index}_${itm.timestamp}`" class="callOut"
                                   style="width:calc(100% + 2px)">调出
                        </el-button>
                        <el-button v-else-if="item.type === 6"
                                   @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                                   @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                                   :ref="`${scope.$index}_${itm.timestamp}`" class="callOut" style="width:calc(100% + 2px)">{{
                            item.reason
                          }}
                        </el-button>
                      </template>
                      <template v-else>
                        <template v-if="index3 == 1">
                          <el-button
                            @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                            @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                            :ref="`${scope.$index}_${itm.timestamp}`"
                            v-if="item.type === 1 || item.type === 2 || item.type === 5"
                            :class="item.conflictOrNot === 1 ? 'conflict-or-not' : className[item.type]"
                            :style="{width:'calc(100% + 2px)',background: item.conflictOrNot === 1 ?'':(itm.timestamp == item.endTimeStamp?('linear-gradient(90deg, '+colorList[item.type]+', '+colorList[scope.row[itm.timestamp][item.length].type]):'')}"
                          >
                            <!--                            :style="{width:'calc(100% + 2px)',background: item.conflictOrNot === 1 ?'':'linear-gradient(90deg, '+colorList[item.type]+', '+colorList[scope.row[itm.timestamp][item.length].type]}">-->

                            <template v-if="itm.timestamp == item.endTimeStamp">
                              <div class="paiban-item-wrap">
                                <i v-if="item.type === 1 && item.isItAWarning === 1"
                                   class="el-icon-warning paiban-warn"></i>
                                <!--                                <span class="order_source">{{ item.length }}</span>-->
                                <span class="order_source">{{ item.orderSourceName.substring(0, 1) }}</span>
                                <span class="order_source" v-if="item.type === 1">{{
                                    item.isPlatoon == 1 ? "已" : "未"
                                  }}</span>
                              </div>
                            </template>
                            <!--                            <div class="order_count"><span class="order_source">{{ item.length }}</span></div>-->
                          </el-button>
                          <el-button v-else-if="item.type === 3"
                                     @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                                     @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                                     :ref="`${scope.$index}_${itm.timestamp}`" class="callOut" style="width:calc(100% + 2px)">借出
                            <div class="order_count" v-if="itm.timestamp == item.endTimeStamp"><span class="order_source">{{ item.length }}</span></div>
                          </el-button>
                          <el-button v-else-if="item.type === 4"
                                     @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                                     @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                                     :ref="`${scope.$index}_${itm.timestamp}`" class="callOut" style="width:calc(100% + 2px)">调出
                            <div class="order_count" v-if="itm.timestamp == item.endTimeStamp"><span class="order_source">{{ item.length }}</span></div>
                          </el-button>
                          <el-button v-else-if="item.type === 6"
                                     @mousemove.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)"
                                     @mouseleave.native="popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 0)"
                                     :ref="`${scope.$index}_${itm.timestamp}`" class="callOut" style="width:calc(100% + 2px)">{{
                              item.reason
                            }}
                            <div class="order_count" v-if="itm.timestamp == item.endTimeStamp"><span class="order_source">{{ item.length }}</span></div>
                          </el-button>
                        </template>
                      </template>
                    </template>
                    <template v-else>

                      <el-dropdown style="width:calc(100% + 2px)"  v-if="item.isAfter" trigger="click" @command="handleCarFreeCommand">
                        <div class="free" style="width:calc(100% + 2px)" @click="handleCarFree(scope.row,item)">
                          <div>日租金</div>
                          <div>{{ item.price }}元/天</div>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="carOffLine">车辆下线</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                      <div v-else class="free" style="width:calc(100% + 2px)">
                        <div>日租金</div>
                        <div>{{ item.price }}元/天</div>
                      </div>


                    </template>
                  </template>


                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>

    </div>

    <el-popover v-if="showpop" :append-to-body="false" :reference="reference" ref='pop' :close-delay="0" placement="top-start" trigger="hover">
      <div style="max-height: 50vh;overflow-y: auto">
        <template v-for="(item, index3) in popData">
          <template v-if="item.length > 0">

            <div class="pop-content" v-if="item.type === 1">

              <div class="pop-line-btn-wrap">
                <div :style="setDotColor(1)" class="pop-text-wrap">预约订单</div>
                <span v-if="item.length > 1" @click="showOrderOverviewDialog(item, true, item.carNo)">查看</span>
              </div>

              <div class="pop-line-wrap">
                {{ rentalType[Number(item.rentalType)] }}
                预取：{{ item.actualStartTime }}
                <span>{{ item.takeStoreName }}</span>
              </div>

              <div class="pop-line-wrap">
                {{ rentalType[Number(item.rentalType)] }}
                预还：{{ item.actualEndTime }}
                <span>{{ item.alsoStoreName }}</span>
              </div>

              <div class="pop-line-wrap">
                客户信息：{{ item.memberName }}&nbsp;&nbsp;{{ item.memberPhone }}
                <el-tag type="success" v-for="(label, index) in item.labelClassify" :key="index">
                  <dict-tag :options="dict.type.label_classify" :value="label"/>
                </el-tag>
              </div>

              <div class="pop-line-wrap">
                车辆：{{ item.carNo }}
              </div>

              <div class="pop-line-wrap">
                订单来源：{{ item.orderSourceName }}
              </div>

              <div class="pop-line-wrap">
                订单编号：{{ item.orderNo }}
              </div>

              <div v-if="item.isItAWarning == 1" class="pop-line-wrap" style="color: #F5242F">
                注：前一订单逾期还车，可能影响此订单，请注意重新排车
              </div>

            </div>

            <div class="pop-content" v-if="item.type === 2">

              <div class="pop-line-btn-wrap">
                <div :style="setDotColor(2)" class="pop-text-wrap">
                  用车订单(
                  <dict-tag style="display:inline-block;color: #23BCCA" :options="dict.type.sys_order_status"
                            :value="item.orderStatus"/>
                  )
                </div>
                <span v-if="item.length > 1" @click="showOrderOverviewDialog(item, true, item.carNo)">查看</span>
              </div>

              <div class="pop-line-wrap">
                {{ rentalType[Number(item.rentalType)] }}
                实取：{{ item.actualStartTime }}
                <span>{{ item.takeStoreName }}</span>
              </div>

              <div class="pop-line-wrap">
                {{ rentalType[Number(item.rentalType)] }}
                {{ item.orderStatus > 4 ? '实还' : '预还' }}：{{ item.actualEndTime }}
                <span>{{ item.alsoStoreName }}</span>
              </div>

              <div class="pop-line-wrap">
                客户信息：{{ item.memberName }}&nbsp;&nbsp;{{ item.memberPhone }}
                <el-tag type="success" v-for="(label, index) in item.labelClassify" :key="index">
                  <dict-tag :options="dict.type.label_classify" :value="label"/>
                </el-tag>
              </div>

              <div class="pop-line-wrap">
                车辆：{{ item.carNo }}
              </div>

              <div class="pop-line-wrap">
                订单来源：{{ item.orderSourceName }}
              </div>

              <div class="pop-line-wrap">
                订单编号：{{ item.orderNo }}
              </div>
            </div>

            <div class="pop-content" v-if="item.type === 3">

              <div class="pop-line-btn-wrap">
                <div :style="setDotColor(3)" class="pop-text-wrap">车辆借出</div>
              </div>

              <div class="pop-line-wrap">
                车辆：{{ item.carNo || '--' }}
              </div>

              <div class="pop-line-wrap">
                借出时间：{{ item.secondmentStartTime }}&nbsp;至&nbsp;
                {{ item.actualEndTime ? item.actualEndTime : `${item.secondmentEndTime || '--'}&nbsp;[预计]` }}
                <span>{{ item.alsoStoreName }}</span>
              </div>

              <div class="pop-line-wrap">
                借调同行：{{ item.secondmentStore }}
              </div>

            </div>

            <div class="pop-content" v-if="item.type === 4">

              <div class="pop-line-btn-wrap">
                <div :style="setDotColor(4)" class="pop-text-wrap">车辆调出</div>
              </div>

              <div class="pop-line-wrap">
                车辆：{{ item.carNo || '--' }}
              </div>

              <div class="pop-line-wrap">
                调出时间：{{ item.secondmentStartTime }}&nbsp;至&nbsp;
                {{ item.secondmentEndTime || '--' }}
              </div>

              <div class="pop-line-wrap">
                调拨门店：{{ item.bringStoreName }}&nbsp;&nbsp;至&nbsp;&nbsp;{{ item.secondmentStore }}
              </div>
            </div>

            <div class="pop-content" v-if="item.type === 5">
              <div class="pop-line-btn-wrap">
                <div :style="setDotColor(5)" class="pop-text-wrap">
                  已还车(
                  <dict-tag style="display:inline-block;color: #369AFE" :options="dict.type.sys_order_status"
                            :value="item.orderStatus"/>
                  )
                </div>
                <span v-if="item.length > 1" @click="showOrderOverviewDialog(item, true, item.carNo)">查看</span>
              </div>

              <div class="pop-line-wrap">
                {{ rentalType[Number(item.rentalType)] }}
                实取：{{ item.actualStartTime }}
                <span>{{ item.takeStoreName }}</span>
              </div>

              <div class="pop-line-wrap">
                {{ rentalType[Number(item.rentalType)] }}
                {{ item.orderStatus > 4 ? '实还' : '预还' }}：{{ item.actualEndTime }}
                <span>{{ item.alsoStoreName }}</span>
              </div>

              <div class="pop-line-wrap">
                客户信息：{{ item.memberName }}&nbsp;&nbsp;{{ item.memberPhone }}
                <el-tag type="success" v-for="(label, index) in item.labelClassify" :key="index">
                  <dict-tag :options="dict.type.label_classify" :value="label"/>
                </el-tag>
              </div>

              <div class="pop-line-wrap">
                车辆：{{ item.carNo }}
              </div>

              <div class="pop-line-wrap">
                订单来源：{{ item.orderSourceName }}
              </div>

              <div class="pop-line-wrap">
                订单编号：{{ item.orderNo }}
              </div>

              <!--            <el-row>-->
              <!--              <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>-->
              <!--              <el-col :span="10">实取:{{ item.actualStartTime }}</el-col>-->
              <!--              <el-col :span="8">{{ item.takeStoreName }}</el-col>-->
              <!--            </el-row>-->
              <!--            <el-row>-->
              <!--              <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>-->
              <!--              <el-col :span="10" v-if="item.orderStatus>4">实还:{{ item.actualEndTime }}</el-col>-->
              <!--              <el-col :span="10" v-else>预还:{{ item.actualEndTime }}</el-col>-->
              <!--              <el-col :span="8">{{ item.alsoStoreName }}</el-col>-->
              <!--            </el-row>-->

              <!--            <el-row style="text-align: right !important;">-->
              <!--              <el-button v-if="item.length>1" type="primary" @click="showOrderOverviewDialog(item, true, scope.row.carNo)">查看</el-button>-->
              <!--            </el-row>-->
              <!--            <el-divider></el-divider>-->
              <!--            <el-row>-->
              <!--              <el-col :span="14"> 客户姓名: {{item.memberName}}/{{ item.memberPhone }}</el-col>-->
              <!--              <el-col :span="10" class="pop-text-wrap">-->
              <!--                <el-tag type="success" v-for="(label, index) in item.labelClassify" :key="index" >-->
              <!--                  <dict-tag :options="dict.type.label_classify" :value="label" />-->
              <!--                </el-tag>-->
              <!--              </el-col>-->
              <!--            </el-row>-->
              <!--            <el-row>-->
              <!--              <el-col :span="16" v-if="item.carNo"> 车辆: {{ item.carNo }}</el-col>-->
              <!--            </el-row>-->
              <!--            <el-row>-->
              <!--              <el-col :span="14"> 订单来源: {{ item.orderSourceName }}</el-col>-->
              <!--              <el-col :span="10" class="pop-text-wrap"> 已还车( <dict-tag style="display:inline-block;color: #369AFE" :options="dict.type.sys_order_status" :value="item.orderStatus"/> ) </el-col>-->
              <!--            </el-row>-->
              <!--            <el-row>-->
              <!--              <el-col :span="24">订单编号: {{ item.orderNo }}</el-col>-->
              <!--            </el-row>-->
            </div>

            <div class="pop-content" v-if="item.type === 6">

              <div class="pop-line-btn-wrap">
                <div :style="setDotColor(6)" class="pop-text-wrap">车辆下线</div>
              </div>

              <div class="pop-line-wrap">
                车辆：{{ item.carNo || '--' }}
              </div>

              <div class="pop-line-wrap">
                下线时间：{{ item.offLineTime }}
              </div>

              <div class="pop-line-wrap">
                下线原因：{{ item.reason || '--' }}
              </div>

              <div class="pop-line-wrap">
                上线时间：{{ item.onLineTime || '--' }}
              </div>

              <!--            <el-row>-->
              <!--              <el-col :span="24">下架时间:{{ item.offLineTime }}</el-col>-->
              <!--            </el-row>-->
              <!--            <el-row>-->
              <!--              <el-col :span="24">下架原因:{{ item.reason || '&#45;&#45;' }}</el-col>-->
              <!--            </el-row>-->
              <!--            <el-row>-->
              <!--              <el-col :span="24">上架时间:{{ item.onLineTime || '&#45;&#45;' }}</el-col>-->
              <!--            </el-row>-->
            </div>

            <el-divider v-if="index3 > 0 && index3 < item.length"></el-divider>
          </template>
          <template v-else>
            <el-row>
              <el-col :span="24">日租金:{{ item.price || '--' }}元</el-col>
            </el-row>
          </template>
        </template>
      </div>
    </el-popover>

    <el-dialog title="订单详情" :append-to-body="false" width="800px" append-to-body destroy-on-close :visible.sync="showOrderOverview">
      <ScheduleOrderOverview @refresh="handleQuery" :orderData="orderData" v-if="showOrderOverview"
                             @cancel="showOrderOverview = false"></ScheduleOrderOverview>
    </el-dialog>

    <el-dialog title="车辆库存及订单展示" :append-to-body="false" width="1000px" append-to-body destroy-on-close :visible.sync="showStorage">
      <CarStorage v-if="showStorage" :query-params="dialogParam" @cancel="showStorage = false"></CarStorage>
    </el-dialog>

    <el-dialog title="库存占用/释放" :append-to-body="false" width="800px" append-to-body destroy-on-close :visible.sync="showStorageShift">
      <CarStorageShit @refresh="handleQuery" :carData="carStorageData" v-if="showStorageShift"
                      @cancel="showStorageShift = false" @success="showStorageShift = false"></CarStorageShit>
    </el-dialog>

    <car-off-line ref="carOffLine" @success="handleQuery"></car-off-line>

  </div>
</template>

<script>
import {rosteringVo, selectModel, selectSeries, tenantlist, tenantStoreList} from '@/api/index';
import Festival from '@/components/festival_chn'
import Template from "@/views/system/template";
import ScheduleOrderOverview from "@/views/components/ScheduleOrderOverview";
import CarStorage from "@/views/components/carstorage";
import CarStorageShit from "@/views/components/carStorageShift";
//引入全屏插件
import screenfull from "screenfull";
import {checkPermi} from '@/utils/permission'

const festival = new Festival()
import moment from "moment"
import carOffLine from "@/views/components/carOffLine.vue";

export default {
  name: "CarStockStatistics",
  components: {Template, ScheduleOrderOverview, CarStorage, CarStorageShit, carOffLine},
  dicts: ['sys_order_source', 'sys_order_status', 'label_classify'],
  data() {
    return {
      activeId: '',
      popData: {},
      reference: {},
      showpop: false,
      orderData: {},
      unSchedule: 0,
      tightCount: 0,
      conflictOrders: 0,
      flag: false,
      showOrderOverview: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      showSearch: true,
      showStorageShift: false,
      carStorageData: {},

      // 总条数
      total: 0,
      storeList: [],
      seriesList: [],
      modelList: [],


      leftMaxHeight: 800,
      rightMaxHeight: 800,
      carNum: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        type: 0,
        currUserStore: null,
        currSeries: null,
        operatingClassification: null,
        shiftSchedulingStatus: null,
        orderSource: null,
        currModel: null,
        keywords: null,
        startTime: null,
        endTime: null,
      },

      dialogParam: {},
      showStorage: false,
      rentalType: {
        1: '到店取还车',
        3: '上门送取车',
        4: '上门送车',
        5: '上门取车',
      },
      className: {
        1: 'scheduled',
        2: 'inUse',
        5: 'returned_vehicle'
      },
      showMonths: [],
      tableData: [],
      minDay: "", // 最小日期
      maxDay: "", // 最大日期
      rendering: true,// 遮罩层
      isFullFlag: false,
      rankList: [],
      originList: [],
      colorList: {
        1: '#FF9F24',
        2: '#23BCCA',
        3: '#647687',
        4: '#647687',
        5: '#369AFE',
        6: '#647687',
      },
      currentTimestamp : moment(moment().format('YYYY-MM-DD')).valueOf(),//当前时间的时间戳
      carOffInfo:{
        defaultCarOffTime:'',
        carId:'',
        carNo:''
      }
    };
  },
  computed: {
    setDotColor(type) {
      return type => ({
        '--dotcolor': this.colorList[type]
      })
    }
  },
  created() {
    this.getOriginList();
    this.getrankList();

    if (!this.queryParams.startTime) {
      this.queryParams.startTime = this.parseTime(new Date(), '{y}-{m}-{d}')
      this.queryParams.endTime = this.parseTime(new Date().getTime() + 30 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
    }
    this.tenantStoreList();


    this.$nextTick(() => {
      this.calcHeight()
      var box = document.querySelector('.left .el-table__body-wrapper');
      box.addEventListener('scroll', this.leftHandleScroll);
      var box2 = document.querySelector('.right .el-table__body-wrapper');
      box2.addEventListener('scroll', this.rightHandleScroll);
    })

    // 设置左边表格的宽度
    this.$nextTick(() => {
      let height = 0
      let setHeight = setInterval(() => {
        if (height !== 0) {
          clearInterval(setHeight)
        } else {
          if (document.querySelector('.right .el-table__header-wrapper')) {
            height = document.querySelector('.right .el-table__header-wrapper').offsetHeight
            document.querySelector('.left .el-table__header th').setAttribute('style', 'height: ' + (height - 30) + 'px !important')
            setTimeout(() => {
              this.rendering = false
            }, 100)
          }
        }
      }, 50)
    })
    // 窗口大小变化时，需要重算
    // window.addEventListener('resize', this.calcHeight, false)
    window.addEventListener("fullscreenchange", this.calcHeight(), false)

  },
  methods: {
    //点击空闲表格
    handleCarFree(carInfo,item) {
      this.carOffInfo.carId = carInfo.id;
      this.carOffInfo.carNo = carInfo.carNo;
      this.carOffInfo.defaultCarOffTime = moment(item.time).format('YYYY-MM-DD');
      console.log('我是空闲表格', carInfo,item);
    },
    handleCarFreeCommand(command){
      if (command == 'carOffLine'){
        this.$refs.carOffLine.show(this.carOffInfo);
      }
    },
    //popShift(scope.$index, itm.timestamp, scope.row[itm.timestamp], 1)
    popShift(pindex, timestamp, pdata, open) {
      const item = pindex + '_' + timestamp

      this.popData = pdata

      if (this.activeId === item && this.showpop) return
      this.showpop = false
      this.activeId = item
      // 因为reference是需要获取dom的引用 所以需要是$el
      this.reference = this.$refs[item][0].$el
      this.$nextTick(() => {
        // 等待显示的popover销毁后再 重新渲染新的popover
        this.showpop = true
        this.$nextTick(() => {
          // 此时才能获取refs引用
          this.$refs.pop.doShow()
        })
      })

    },

    goStorage(row) {
      this.dialogParam.modelId = row.modelId;
      this.dialogParam.storeId = this.queryParams.currUserStore;
      this.dialogParam.startTime = this.queryParams.startTime;
      this.dialogParam.endTime = this.queryParams.endTime;
      this.showStorage = true
    },

    getOriginList() {
      this.getDicts('ota_order_resource').then(res => {
        this.originList = [
          {
            dictLabel: '系统订单',
            dictValue: '1'
          },
          ...res.data
        ]
      })
    },
    getrankList() {
      tenantlist().then(res => {
        this.rankList = res.data
      })
    },

    calcHeight() {
      var col = document.getElementsByName("gutter")[0]
      if (col) {
        col.remove()
      }
      let height = 56;
      let searchBox = document.querySelector('.paiban .custom_card_0');
      if (searchBox && searchBox.offsetHeight > 0) {
        height = searchBox.offsetHeight
      }
      let maxHeight = document.body.offsetHeight - height - 50
      if (!this.isFullFlag) {
        maxHeight = maxHeight - 205
      }
      setTimeout(() => {
        let leftScrolling = document.querySelector('.left  .is-scrolling-none');
        let leftBodyBox = document.querySelector('.left  .el-table__body-wrapper');
        if (leftScrolling || leftBodyBox.offsetWidth === 0) {
          this.leftMaxHeight = maxHeight - 16
        } else {
          this.leftMaxHeight = maxHeight
        }
        this.rightMaxHeight = maxHeight

      }, 100)
    },
    // 左右滚动条滚动同步
    leftHandleScroll() {
      var leftTable = document.querySelector('.left .el-table__body-wrapper');
      var rightTable = document.querySelector('.right .el-table__body-wrapper');
      rightTable.scrollTop = leftTable.scrollTop

    },
    rightHandleScroll() {
      var leftTable = document.querySelector('.left .el-table__body-wrapper');
      var rightTable = document.querySelector('.right .el-table__body-wrapper');
      leftTable.scrollTop = rightTable.scrollTop

    },
    clickFun() {
      this.isFullFlag = !this.isFullFlag
      const element = document.querySelector('.paiban');//指定全屏区域元素
      if (this.isFullFlag) {
        element.requestFullscreen()
      } else {
        document.exitFullscreen();
      }
    },

    tenantStoreList() {
      tenantStoreList().then(res => {
        this.storeList = res.data
        if (this.storeList.length > 0) {
          this.queryParams.currUserStore = res.data[0].id
        }
        this.getList();
        this.getChartTitle() // 渲染的信息
      })
    },
    selectSeries() {
      this.queryParams.currSeries = null;
      this.queryParams.currModel = null;
      selectSeries({storeId: this.queryParams.currUserStore}).then(res => {
        this.seriesList = res.data
      })
    },
    selectModel() {
      this.queryParams.currModel = null;
      selectModel({storeId: this.queryParams.currUserStore, seriesId: this.queryParams.currSeries}).then(res => {
        this.modelList = res.data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();

    },
    //全屏方法
    isScreenFull() {
      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle(this.$refs.box);
    },
    //是否休息日（法定假日+正常周末）
    isRestDay(item) {
      // const timestr =  this.parseTime(new Date(item.timestamp), '{y}{m}{d}')
      //
      // // console.log('日期item=>', timestr)
      // const res = festival.day(Number(timestr))
      // console.log('节假日res===>', res)

      if (item.holidayRes.isHoliday) {
        return true
      } else {
        if ((item.week.indexOf('六') > 0 || item.week.indexOf('日') > 0)) {
          //周六周日是调休要上班，其余休假
          return !item.holidayRes.isSwap
        } else {
          return false
        }
      }

    },

    //是否法定假日
    // isHoliday(item){
    // const time = new Date(this.parseTime(new Date(timeStamp), '{y}-{m}-{d} 00:00:00')).getTime();
    // const timestr =  this.parseTime(new Date(item.timestamp), '{y}{m}{d}')
    //
    // // console.log('日期item=>', timestr)
    // const res = festival.day(Number(timestr))
    // console.log('节假日res===>', res)
    //   return item.holidayRes.isHoliday
    // },

    //法定假日名称
    holidayStr(item) {
      // const timestr =  this.parseTime(new Date(item.timestamp), '{y}{m}{d}')
      //
      // // console.log('日期item=>', timestr)
      // const res = festival.day(Number(timestr))
      // console.log('节假日res===>', res)
      if (item.holidayRes.isHoliday) {
        return item.holidayRes.name
      } else {
        return ''
      }
    },


    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询VIEW列表 */
    getList() {
      this.tableData = []


      this.loading = true;
      rosteringVo(this.queryParams).then(response => {
        this.tableData = response.data.data;
        this.unSchedule = response.data.unscheduledQuantity
        this.tightCount = response.data.inventoryShortage
        this.conflictOrders = response.data.conflictOrders
        this.setrowspans() // 设置合并
        this.loading = false;
        this.combileData();
      });


      // statisticsinfo(this.queryParams).then(res => {
      //   this.unSchedule = res.data.unscheduledQuantity
      //   this.tightCount = res.data.inventoryShortage
      // }).catch(e => {
      //   this.unSchedule = 0
      //   this.tightCount = 0
      // });
    },

    //将日期数据结合进接口返回的数据中
    combileData() {

      const _this = this

      let timestampList = []
      this.showMonths.map(mitem => mitem.daysArr.map(ditem => ditem.timestamp)).forEach(item => {
        timestampList.push(...item)
      })


      this.tableData.forEach(ditem => {
        timestampList.forEach(titem => {
          ditem[titem] = _this.getShowType(titem, ditem);
        })
      })

      timestampList = []
      console.log('处理完的数据', this.tableData)
    },

    getShowType(timeStamp, row) {
      const currentTime = moment().format('YYYY-MM-DD');
      const currentTimestamp = moment(currentTime).valueOf();
      const time = new Date(this.parseTime(new Date(timeStamp), '{y}-{m}-{d} 00:00:00')).getTime();
      let rowItem = [{
        length: 0,
        price: 0
      }];
      if (row.returnOrder.length > 0) {
        for (const item of row.returnOrder) {
          let startTime = new Date(item.actualStartTime).getTime();
          let endTime = new Date(item.actualEndTime).getTime() || new Date(this.queryParams.endTime).getTime();

          let startZeroTime = new Date(this.parseTime(item.actualStartTime, '{y}-{m}-{d} 00:00:00')).getTime();
          if (startZeroTime == time || (startTime <= time && time < endTime)) {
            // row[timeStamp] = item
            // return 5;
            rowItem.push({...item, type: 5})
          }
        }
      }
      if (row.vehicleOrder.length > 0) {
        for (const item of row.vehicleOrder) {
          let startTime = new Date(item.actualStartTime).getTime();
          let endTime = new Date(item.actualEndTime).getTime() || new Date(this.queryParams.endTime).getTime();
          let startZeroTime = new Date(this.parseTime(item.actualStartTime, '{y}-{m}-{d} 00:00:00')).getTime();
          if (startZeroTime == time || (startTime <= time && time < endTime)) {
            // row[timeStamp] = item
            // return 2;
            rowItem.push({...item, type: 2})
          }
        }
      }
      if (row.bookingOrder.length > 0) {
        for (const item of row.bookingOrder) {
          let startTime = new Date(item.actualStartTime).getTime();
          let endTime = new Date(item.actualEndTime).getTime() || new Date(this.queryParams.endTime).getTime();
          let startZeroTime = new Date(this.parseTime(item.actualStartTime, '{y}-{m}-{d} 00:00:00')).getTime();
          if (startZeroTime == time || (startTime <= time && time < endTime)) {
            // row[timeStamp] = item
            // return 1;
            rowItem.push({...item, type: 1})
          }
        }
      }
      if (row.seconded.length > 0) {
        for (const item of row.seconded) {
          let startTime = new Date(item.secondmentStartTime).getTime();
          let endTime = new Date(item.secondmentEndTime).getTime() || new Date(this.queryParams.endTime).getTime();
          let startZeroTime = new Date(this.parseTime(item.secondmentStartTime, '{y}-{m}-{d} 00:00:00')).getTime();
          if (startZeroTime == time || (startTime <= time && time < endTime)) {
            // row[timeStamp] = item
            // return 3;
            rowItem.push({...item, type: 3})
          }
        }
      }
      if (row.secondment.length > 0) {
        for (const item of row.secondment) {
          let startTime = new Date(item.secondmentStartTime).getTime();
          let endTime = new Date(item.secondmentEndTime).getTime() || new Date(this.queryParams.endTime).getTime();
          let startZeroTime = new Date(this.parseTime(item.secondmentStartTime, '{y}-{m}-{d} 00:00:00')).getTime();
          if (startZeroTime == time || (startTime <= time && time < endTime)) {
            // row[timeStamp] = item
            // return 4;
            rowItem.push({...item, type: 4})
          }
        }
      }
      if (row.carOff.length > 0) {
        for (const item of row.carOff) {
          let startTime = new Date(item.offLineTime).getTime();
          let endTime = new Date(item.onLineTime).getTime() || new Date(this.queryParams.endTime).getTime();
          let startZeroTime = new Date(this.parseTime(item.offLineTime, '{y}-{m}-{d} 00:00:00')).getTime();
          if (startZeroTime == time || (startTime <= time && time < endTime)) {
            // row[timeStamp] = item
            // return 6;
            rowItem.push({...item, type: 6})
          }
        }
      }

      let price = 0;
      for (let item of row.prices) {
        if (Number(time) === Number(item.days)) {
          price = item.price
        }
      }

     //  是否是今日之后
     let isAfter = false;
      if(time >= this.currentTimestamp) {
         isAfter = true;
      }
      rowItem.forEach(i => {
        i.length = rowItem.length - 1;
        i.price = price;
        i.time = time;
        i.isAfter = isAfter;
      })
      return rowItem;
      // console.log('处理完的row=>')
    },
    //获得数据相同的行数
    objectSpanMethod({row, column, rowIndex, columnIndex}) {

      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.tableData.forEach(v => {
        v.rowspan = 1;
      });
      // 双层循环
      for (let i = 0; i < this.tableData.length; i++) {
        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
        // 这里进行判断
        // 如果当前行的id和下一行的id相等
        // 就把当前v.rowspan + 1
        // 下一行的v.rowspan - 1
        for (let j = i + 1; j < this.tableData.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (this.tableData[i].modelId == this.tableData[j].modelId) {
            this.tableData[i].rowspan++;
            this.tableData[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + this.tableData[i].rowspan - 1;
      }
    },
    // 渲染表格头，
    getChartTitle() {
      var chartTable = this.tableData;
      // 准备日期，为了防止多次赋值属性，导致计算属性重新计算，决定只赋值一次
      var StartDate = new Date(this.queryParams.startTime);
      var EndDate = new Date(this.queryParams.endTime);
      for (var i = 0; i < chartTable.length; i++) {
        var days = this.GetNumberOfDays(StartDate, EndDate) // 计算工期
        this.tableData[i].days = days + 1 // 加一是因为没算结算当天
        // 记录时间戳
        this.tableData[i].beginTimeStamp = this.getTimeStamp(StartDate)
        this.tableData[i].endTimeStamp = this.getTimeStamp(EndDate)

      }
      this.minDay = StartDate
      this.maxDay = EndDate

      this.getYearArr()

    },

    // 获取需要的格式的年月日信息
    getYearArr() {

      // 获取需要格式的年月信息
      let yearArr = []; // 存年
      let allMonthsArr = []; // 存月

      let minYear = new Date(this.minDay).getFullYear();
      let maxYear = new Date(this.maxDay).getFullYear();

      // 保存年
      if (minYear === maxYear) {
        yearArr.push({
          year: minYear + "",
          months: [],        // 放月的数组
          days: []
        })
      } else {
        for (let i = minYear; i <= maxYear; i++) {
          yearArr.push({
            year: i + "",
            months: [],        // 放月的数组
            days: []
          })
        }
      }
      // 保存月
      for (let i = 0; i < yearArr.length; i++) {
        let minMonth = 1
        if (i === 0) {
          minMonth = new Date(this.minDay).getMonth() + 1;
        }
        if (yearArr.length > 1) {
          if (yearArr.length - 1 === i) {
            let maxMonth = new Date(this.maxDay).getMonth() + 1;
            let _maxDay = new Date(this.maxDay).getDate() // 最大日期 天数
            let j = 1
            while (j <= maxMonth) {
              let monthsDays = this.getLastDay(yearArr[i].year, j); // 获取月份一共有多少天
              let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + monthsDays)
              // 如果显示月|天 才用记录天
              if (j === maxMonth) {
                monthsDays = _maxDay
              }
              let daysArr = []; // 存天
              for (let k = 1; k <= monthsDays; k++) {
                timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + (k > 9 ? k : '0' + k))

                const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
                const res = festival.day(Number(timestr))

                daysArr.push({
                  day: k + "",
                  week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                  timestamp: timestampstr,
                  holidayRes: res
                });
              }
              allMonthsArr.push({str: yearArr[i].year + "年" + j + "月", daysArr: daysArr})
              j++
            }
          } else {
            if (i === 0) {
              let j = minMonth
              let _minDay = new Date(this.minDay).getDate() // 最小日期 天数

              while (j <= 12) {
                let monthsDays = this.getLastDay(yearArr[i].year, j); // 获取月份一共有多少天
                let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + monthsDays)
                let daysArr = []; // 存天
                for (let k = 1; k <= monthsDays; k++) {
                  // 如果开始月，就不从1日开始，而是从最开始的日期那天开始算起
                  if (k === 1 && j === minMonth) {
                    k = _minDay
                  }
                  timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + (k > 9 ? k : '0' + k))

                  const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
                  const res = festival.day(Number(timestr))

                  daysArr.push({
                    day: k + "",
                    week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                    timestamp: timestampstr,
                    holidayRes: res
                  });
                }
                allMonthsArr.push({str: yearArr[i].year + "年" + j + "月", daysArr: daysArr})
                j++
              }
            } else {
              let j = 1
              while (j <= 12) {
                let monthsDays = this.getLastDay(yearArr[i].year, j); // 获取月份一共有多少天
                let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + monthsDays)

                let daysArr = []; // 存天
                for (let k = 1; k <= monthsDays; k++) {
                  timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + (k > 9 ? k : '0' + k))

                  const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
                  const res = festival.day(Number(timestr))

                  daysArr.push({
                    day: k + "",
                    week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                    timestamp: timestampstr,
                    holidayRes: res
                  });
                  allMonthsArr.push({str: yearArr[i].year + "年" + j + "月", daysArr: daysArr})
                }
                j++
              }
            }

          }
        } else {
          // 如果只有一年那么没有必要判断是否记录天
          let maxMonth = new Date(this.maxDay).getMonth() + 1;
          let _minMonth = new Date(this.minDay).getMonth() + 1;
          let _minDay = new Date(this.minDay).getDate() // 最小日期 天数
          let _maxDay = new Date(this.maxDay).getDate() // 最大日期 天数

          console.log("-------------------")
          console.log(_minMonth, maxMonth)

          while (_minMonth <= maxMonth) {
            let monthsDays = this.getLastDay(yearArr[i].year, _minMonth); // 获取月份一共有多少天
            let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (_minMonth > 9 ? _minMonth : '0' + _minMonth) + "-" + monthsDays)
            // 如果结束月，不是到本月最后一天，而是截止到最
            if (_minMonth === maxMonth) {
              monthsDays = _maxDay
            }
            let daysArr = []; // 存天
            for (let k = 1; k <= monthsDays; k++) {
              // 如果开始月，就不从1日开始，而是从最开始的日期那天开始算起
              if (k === 1 && _minMonth === minMonth) {
                k = _minDay
              }
              timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (_minMonth > 9 ? _minMonth : '0' + _minMonth) + "-" + (k > 9 ? k : '0' + k))

              const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
              const res = festival.day(Number(timestr))

              daysArr.push({
                day: k + "",
                week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                timestamp: timestampstr,
                holidayRes: res
              });
            }
            allMonthsArr.push({str: yearArr[i].year + "年" + _minMonth + "月", daysArr: daysArr})
            _minMonth++
          }
        }
      }
      this.showMonths = allMonthsArr

      console.log('this.showMonths=>', this.showMonths)
    },

    // 获取月的最后一天
    getLastDay(myyear, mymonth) {
      var new_date = new Date(myyear, mymonth, 0);
      return new_date.getDate();
    },

    // 获得天数
    GetNumberOfDays(date1, date2) {
      //date1：开始日期，date2结束日期
      var a1 = Date.parse(new Date(date1));
      var a2 = Date.parse(new Date(date2));
      var day = parseInt((a2 - a1) / 86400000);//核心：时间戳相减，然后除以天数
      return day
    },
    // 时间比较 true 比大
    compareDate(dateTime1, dateTime2, condition = true) {
      var formatDate1 = new Date(dateTime1)
      var formatDate2 = new Date(dateTime2)
      if (formatDate1 >= formatDate2) {
        return condition ? dateTime1 : dateTime2
      } else {
        return condition ? dateTime2 : dateTime1
      }
    },
    getTimeStamp(val) {
      let a = this.parseTime(val || new Date(), '{y}-{m}-{d} 00:00:00');
      return new Date(a).getTime()
    },
    selectTime() {
      document.querySelector('.mSelectTime .el-input__inner').focus();
    },

    changTime(val) {
      switch (val) {
        case 0:
          this.queryParams.endTime = this.parseTime(new Date(this.queryParams.startTime).getTime() + 30 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          break;
        case 1:
          this.queryParams.startTime = this.parseTime(new Date(this.queryParams.startTime).getTime() - 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          this.queryParams.endTime = this.parseTime(new Date(this.queryParams.endTime).getTime() - 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          break;
        case 2:
          this.queryParams.startTime = this.parseTime(new Date(), '{y}-{m}-{d}')
          this.queryParams.endTime = this.parseTime(new Date().getTime() + 30 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          break;
        case 3:
          this.queryParams.startTime = this.parseTime(new Date(this.queryParams.startTime).getTime() + 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          this.queryParams.endTime = this.parseTime(new Date(this.queryParams.endTime).getTime() + 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          break;
      }
      this.handleQuery()
      this.getChartTitle() // 渲染的信息
    },
    showOrderOverviewDialog(item, isBook, carNo) {
      console.log('订单信息', item)
      item.isBook = isBook
      if (carNo && !item.carNo) {
        item.carNo = carNo
      }
      this.orderData = item
      this.showOrderOverview = true
    },
    carPlatclick(row) {
      if (checkPermi(['car:ota:inventory'])) {
        this.carStorageData = row
        this.showStorageShift = true
      }
    }

  }
};
</script>
<style scoped>
:root {
  --dotcolor: #FF9F24
}

.paiban {
  background-color: #f1f4f7;
  padding: 0;
}

.cell-btn {
  width: 100%;
  height: 100%;
  padding: 0;
}

/* 边框宽度 */
/deep/ .barchart .el-table--border td,
.barchart .el-table--border th {
  border-width: 1px;
}

/* 单元格padding */
/deep/ .barchart .el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
  padding: 0px !important;
}

/deep/ .el-table .cell {
  padding: 0px !important;
  line-height: 19px !important;
}

/deep/ .right .el-table .el-table__body-wrapper .cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .barchart .el-table .el-table__cell {
  padding: 0px !important;
  height: 30px !important;
}

/* 单元格高度 */
/deep/ .barchart .left .el-table--medium th,
.barchart .el-table--medium td {
  padding: 0px 0px !important;
  height: 30px !important;
}


/* 单元格高度 */
/deep/ .barchart .right .el-table--medium .is-leaf,
.barchart .el-table--medium td {
  padding: 0px 0px !important;
  height: 67px !important;
}

.barchart .right .el-table__header-wrapper .el-row {
  line-height: 15px !important;
}

/deep/ .barchart .scheduled {
  background: #FF9F24;
  height: 25px;
  position: relative;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 0;*/
}

/deep/ .barchart .inUse {
  background: #23BCCA;
  height: 25px;
  position: relative;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 0;*/
}

/deep/ .barchart .returned_vehicle {
  background: #369AFE;
  height: 25px;
  position: relative;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 0;*/
}

/deep/ .barchart .conflict-or-not {
  background: #F5242F;
  height: 25px;
  position: relative;
}

/deep/ .barchart .callOut {
  background: #D3DDE7;
  height: 25px;
  position: relative;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/

  /*left: 0;*/
}


/deep/ .custom_card .el-row {
  margin-right: 0;
}

/deep/ .barchart .free {
  background: #FFFFFF;
  height: 40px;
  text-align: center;
  font-weight: bold;
}

/deep/ .barchart .free div {
  display: none;
}

/deep/ .barchart .free:hover div {
  display: inline-block;
}

/* 布局盒子 这样使得固定列与右侧图表分开 */
.barchart {
  width: 100%;
  display: flex;
}

/deep/ .barchart .el-table th {
  background: #F5F7FA;
}

.barchart .left {
  width: 22%;
}

/deep/ .left .el-table__body-wrapper {
  overflow-y: hidden !important;
}

/deep/ .left th.el-table__cell.gutter {
  width: 0px !important;
  display: none;
}

/deep/ .left .el-table__body {
  width: 100% !important;
}

/deep/ .barchart .el-table__body .cell {
  height: 40px !important;
}

.barchart .right {
  width: 78%;
}

.right .el-button {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.line {
  margin: 2px 4px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}


.car_no {
  height: 24px;
  width: 90px;
  box-sizing: border-box;
  color: white;
  font-weight: bold;
  background-color: #1e68bb;
  border-radius: 3px;
  border: white 0.5px solid;
  text-align: center;
  padding: 2px 0px;
  display: inline-block;
  box-shadow: 0 0 1px 2px #1e68bb;
}

.car_no_new {
  height: 24px;
  width: 90px;
  color: #000000;
  font-weight: bold;
  background-image: linear-gradient(to top, #12c53e, #ffffff);
  border-radius: 3px;
  border: #000000 0.5px solid;
  text-align: center;
  padding: 2px 0px;
  display: inline-block;
  box-shadow: 0 0 1px 2px #85c085;
}

/deep/ .label-class {
  color: #F5242F !important;
}

/deep/ .el-radio-box .el-radio-button--medium .el-radio-button__inner {
  padding: 10px !important;
}

.custom_card_0 {
  padding: 10px;
}

.custom_card {
  padding: 10px;
}

.dian {
  user-select: none;
}

.order_source {
  border-radius: 20px;
  height: 20px;
  line-height: 20px;
  width: 20px;
  text-align: center;
  font-size: 12px;
  border: 1px #333 solid;
  box-sizing: border-box;
  color: #333;
  background: white;
  margin-right: 3px;
  overflow: hidden;
}

.paiban-item-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /*height: 100%;*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.paiban-item-wrap-count {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 75%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.order_count {
  width: 25%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /*background-color: #d7d7d7;*/
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: bold;
}

.paiban-warn {
  color: #F5242F;
  margin-right: 3px;
}


.model-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.noplan {
  font-size: 14px;
  color: #333;
  margin: -10px 0 10px;
}

/deep/ .item .el-badge__content.is-fixed {
  top: -2px !important;
  right: 18px !important;
}

::v-deep .el-popover__reference-wrapper .el-button:hover,
.el-button:focus {
  color: #606266 !important;
}

.order-divider {
  /*height: 2px !important;*/
  width: 100%;
  /*background-color: black !important;*/
}

/deep/ .barchart .right .el-table--medium .is-leaf {
  text-align: center !important;
}

.pop-text-wrap {
  display: flex;
  /*justify-content: flex-end;*/
  align-items: center;
  color: var(--dotcolor);
  font-size: 12px;
  /*margin-left: 5px;*/
}

.pop-text-wrap::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  /*background-color: #FF9F24;*/
  background-color: var(--dotcolor);
  left: -20px;
  margin-right: 5px;
}

.pop-content {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
}

.pop-line-btn-wrap {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pop-line-btn-wrap span {
  color: #5473E8;
  cursor: pointer;
}

.pop-line-wrap {
  height: 25px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #333;
}

.pop-line-wrap span {
  margin-left: 15px;
}
</style>
